<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        /* 
            事件循环（event loop）
                函数在每次执行时，都会产生一个执行环境。
                执行环境负责存储函数执行时产生的一切数据。

                问题：函数的执行环境存储在哪里？
                    函数的执行环境存储到一个叫做调用栈的地方。

                栈，是一种数据结构，特点是后进先出。

            调用栈（call stack）
                调用栈负责存储函数的执行环境
                当一个函数被调用时，它的执行环境会被做为一个栈帧，插入到调用栈的栈顶
                函数执行完毕其栈帧会自动在作用栈中弹出。

            消息队列
                队列也是一种数据结构，先进先出。
                消息队列负责存储将要执行的函数。

                当我们触发了一个事件，其响应函数并不是直接就添加到调用栈中，因为调用栈中还可能存在一些尚未执行完毕的代码。

                事件触发后，将事件的响应函数插入到消息队列中排队。
        */
        



        document.addEventListener("DOMContentLoaded",()=>{
            const btn =document.getElementsByClassName("btn")[0]

            btn.addEventListener("click",()=>{
                console.log("按钮被点击了！")
            })
        })

    </script>
</head>

<body>
    <button class="btn">点我一下</button>
</body>

</html>